<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css clear</title>
    <!--<link type="text/css" href="clear.css">-->
    <style>
        img.floatLeft{
            float: left;
            clear: both; /*  图像的左侧和右侧均不允许出现浮动元素： 不然第二个图像会浮动到 第一个图象右侧 */
        }  /*  但是 会对*/

        div.clear{
            clear: both;  /*  注意这两者的区别 */
        }

    </style>
</head>
<body>
    <img src="../images/eg_merglobe.gif" class="floatLeft">
    <img src="../images/eg_merglobe.gif" class="floatLeft">
    <p>
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>

    <!--<div class="clear"></div>  &lt;!&ndash;  空的 div 是否 能清除 上面 img 的浮动? &ndash;&gt;-->
    <img src="../images/eg_merglobe.gif" class="floatLeft">
    <div class="clear"></div>  <!--  空的 div 是否 能清除 上面 img 的浮动 清除了 p 没有 环绕着这img 实际上
                                     大部分的情况下 我们把 img 和 p 放进去一个div 然后在要清理的地方放一个 空的 clear div 不影响之后的文档流-->
    <p>
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>


</body>
</html>